<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddLayerMask.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_MASK_LAYER).addGeometry(map).addTo(map);

      map.on("mousemove", function (e) {
        if (!layer.getMask()) {
          layer.setMask(new maptalks.Marker(e.coordinate, {
            "symbol": {
              "markerType": "ellipse",
              "markerWidth": 250,
              "markerHeight": 250,
            }
          }));
        } else {
          layer.getMask().setCoordinates(e.coordinate);
        }
      });

      // 随机生成100个marker
      let extent = map.getExtent(),
          min = extent.getMin(),
          w = extent.getWidth(),
          h = extent.getHeight(),
          markers = [];
      for (let i = 0; i < 100; i++) {
        markers.push(new maptalks.Marker([min.x + Math.random() * w, min.y + Math.random() * h]));
      }

      layer.addGeometry(markers);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
